<template>
  <div class="dashboard-container">
    <!-- 顶部标题栏（F11全屏140px，非全屏自适应） -->
    <div class="top-header" :style="headerStyle">
      <h1>高平市水环境监控预警与<br />风险防控管理平台</h1>
    </div>

    <!-- 主体内容布局 -->
    <div class="main-content" :style="mainContentStyle">
      <!-- 左侧面板 -->
      <div class="panel-col left">
        <!-- 水环境质量 -->
        <div class="panel water-quality">
          <div class="panel-header">
            <div
              class="panel-title-container"
              @click="navigateToMenu('185001', '2')"
            >
              <h2 class="panel-title">水环境质量</h2>
            </div>
          </div>
          <p class="stats">
            总数 {{ qualityPieTotal }}个，无数据
            {{ qualityPieOfflinesize }}个，超标
            {{ qualityPieisOvesize }}个，优良率 {{ qualityPieexcellent }}%
          </p>
          <div ref="qualityPie" class="chart"></div>
        </div>

        <!-- 手工断面水质分析 -->
        <div class="panel manual-analysis">
          <div class="panel-header">
            <div
              class="panel-title-container"
              @click="navigateToMenu('185001', '1')"
            >
              <h2 class="panel-title">手工断面水质分析</h2>
              <div class="date">2025-10</div>
            </div>
          </div>
          <div class="radio-group">
            <el-radio-group
              v-model="manualSectionType"
              @change="manualTypeChange"
              size="small"
            >
              <el-radio-button label="0">国考</el-radio-button>
              <el-radio-button label="1">省考</el-radio-button>
              <el-radio-button label="2">市考</el-radio-button>
            </el-radio-group>
          </div>
          <!-- 优化后的双环形仪表盘 -->
          <div class="gauge-container">
            <!-- 达标率环形组 -->
            <div class="gauge-group cicLeft">
              <!-- <div ref="gaugeRingLeft" class="gauge-chart"></div> -->
              <div class="gauge-info">
                <div class="gauge-value">{{ isOver ? isOver : 0 }}%</div>
                <div class="gauge-trend">
                  <div>
                    同比
                    <span class="up">▲ {{ tbisOver ? tbisOver : 0 }}%</span>
                  </div>
                  <div>
                    环比
                    <span class="down">▼ {{ hbisOver ? hbisOver : 0 }}%</span>
                  </div>
                </div>
              </div>
              <div class="gauge-label">达标率</div>
            </div>
            <!-- 分割线 -->
            <div class="gauge-divider"></div>
            <!-- 优良率环形组 -->
            <div class="gauge-group cicRight">
              <!-- <div ref="gaugeRingRight" class="gauge-chart"></div> -->
              <div class="gauge-info">
                <div class="gauge-value">{{ yl ? yl : 0 }}%</div>
                <div class="gauge-trend">
                  <div>
                    同比 <span class="up">▲ {{ tbyl ? tbyl : 0 }}%</span>
                  </div>
                  <div>
                    环比 <span class="down">▼ {{ hbyl ? hbyl : 0 }}%</span>
                  </div>
                </div>
              </div>
              <div class="gauge-label">优良率</div>
            </div>
          </div>
        </div>

        <!-- 水质变化 -->
        <div class="panel water-change">
          <div class="panel-header">
            <div
              class="panel-title-container"
              @click="navigateToMenu('185001', '1')"
            >
              <h2 class="panel-title">水质变化</h2>
              <!-- <i
                class="el-icon-monitor data-icon"
              ></i> -->
            </div>
          </div>
          <div ref="waterChange" class="chart"></div>
        </div>
      </div>

      <!-- 中间地图区域 -->
      <div class="center-section">
        <!-- <div id="map" class="map-container"></div> -->
        <ul class="function-modules">
          <li
            v-for="(module, index) in functionModuleList"
            :key="index"
            class="module-item"
            @click="handleModuleClick(module)"
          >
            <img :src="module.icon" :alt="module.name" class="module-icon" />
            <span class="module-name" v-html="module.name"></span>
          </li>
        </ul>
      </div>

      <!-- 右侧面板 -->
      <div class="panel-col right">
        <!-- 污染源分析 -->
        <div class="panel pollution-analysis">
          <div class="panel-header">
            <div class="panel-title-container">
              <h2 class="panel-title">污染源分析</h2>
              <i
                class="el-icon-monitor data-icon"
                @click="navigateToMenu('185007')"
              ></i>
            </div>
          </div>
          <div class="info-text">
            <div class="info-row">
              <p>污染源企业 32</p>
              <p>污水处理厂 {{ sewagefarmNums }}</p>
              <p>入河排污口 {{ outfallNums }}</p>
            </div>
            <div class="info-row">
              <p>排放量 {{ dischargeNums }}万吨</p>
              <p style="color: #ff4d4f">超标企业 {{ overNums }}个</p>
              <p></p>
            </div>
          </div>
          <div ref="pollutionBar" class="chart"></div>
        </div>

        <!-- 实时监测列表 -->
        <div class="panel monitor-list">
          <div class="panel-header">
            <div class="panel-title-container">
              <h2 class="panel-title">实时监测列表</h2>
              <i
                class="el-icon-monitor data-icon"
                @click="navigateToMenu('185001', '2')"
              ></i>
            </div>
          </div>
          <!-- 自定义监测列表结构 -->
          <div class="monitor-list-custom">
            <div
              v-for="item in monitorList"
              :key="item.id"
              class="monitor-item"
              :class="{ exceed: item.isoverstandard === '1' }"
            >
              <div class="item-header">
                <i class="el-icon-water-drop"></i>
                <span class="item-name">{{ item.segmentname }}</span>
                <el-tag :type="getTagType(item.qualitylevelname)" size="mini">
                  {{ item.qualitylevelname }}
                </el-tag>
                <el-tag
                  :type="item.isoverstandard === '1' ? 'danger' : 'success'"
                  size="mini"
                >
                  {{ item.isoverstandard === "1" ? "超标" : "未超标" }}
                </el-tag>
              </div>
              <!-- 超标描述（仅超标项显示） -->
              <div v-if="item.isoverstandard === '1'" class="exceed-desc">
                <span class="desc-label">超标描述</span>
                <span class="desc-content">{{
                  item.overstandarddescribe
                }}</span>
              </div>
            </div>
            <!-- 无数据提示 -->
            <div v-if="monitorList.length === 0" class="no-data">暂无数据</div>
          </div>
        </div>

        <!-- 实时视频 -->
        <div class="panel realtime-video">
          <div class="panel-header">
            <div class="panel-title-container">
              <h2 class="panel-title">实时视频</h2>
              <i
                class="el-icon-monitor data-icon"
                @click="navigateToMenu('185006')"
              ></i>
            </div>
          </div>
          <div class="video-container">
            <video class="black-video-placeholder" controls="false"></video>
            <!-- <video
              class="black-video-placeholder"
              controls
              poster="@/assets/images/video-placeholder.png"
            >
              您的浏览器不支持视频播放
            </video> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import { XYZ } from "ol/source";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import layerData from "./utils/layerdata";
import "ol/proj/epsg4326";
import { wmsBaseUrl } from "@/views/biz/utils/config";
import {
  createPointLayer,
  createHeatmapLayer,
  createWmsLayer,
  loadGeoJsonLayer,
} from "@/views/biz/utils/layerLoader";
import { getData } from "@/views/biz/utils/getJiashicangLayerData";
import {
  getAutoWaterQuality,
  getManualWaterQuality,
  getManualSegmentDateChange,
  autovaluatehourdata,
  getPollutionSourceAnalysis,
  getWarningLastInfo,
} from "@/views/biz/api/jiashicang";
import Legend2 from "./components/Legend2";
import MapPopup from "./components/MapPopup.vue";
import { getMenuList } from "@/api/commonApi";
import { getRouterNew } from "@/api/commonApi";

export default {
  name: "jiashicang",
  components: {
    Legend2,
    MapPopup,
  },
  data() {
    return {
      // 保持原有数据不变，新增图表需要的中心图片base64
      gopathMap: {
        185001: {
          1: "/riverGeneralMange/dataquery/manualMonitor/handdata",
          2: "/riverGeneralMange/onlineMonitoring",
        },
        185006: "/video/RealTimeVideo",
        185007: "/zhManagement/wryMangement/statisticsAnalysis/company",
      },
      manualSectionType: "0",
      monitorList: [],
      layerData: layerData,
      map: null,
      popupVisible: false,
      popupFeatureData: {},
      popupLayerId: "",
      popupPosition: [0, 0],
      tiandituToken: "3d9e801ed2c10bc2e6eba8037e53817b",
      currentLayerIds: [],
      loadedLayers: {},
      checkList: [],
      qualityPie: null,
      qualityPieData: [],
      qualityPieRate: {},
      qualityPieTotal: 0,
      qualityPieOfflinesize: 0,
      qualityPieisOvesize: 0,
      qualityPieexcellent: 0,
      pollutionSourceAnalysisData: null,
      PollutionDates: [],
      PollutionBarData: [],
      PollutionLineData: [],
      sewagefarmNums: 0,
      outfallNums: 0,
      overNums: 0,
      dischargeNums: 0,
      isOver: 95,
      tbisOver: 2,
      hbisOver: 3,
      yl: 75,
      tbyl: 2,
      hbyl: 3,
      gaugeSampleDate: "",
      waterChangeDates: [],
      waterChangeYilei: [],
      waterChangeErlei: [],
      waterChangeSanlei: [],
      waterChangeSilei: [],
      waterChangeWulei: [],
      waterChangeLiewulei: [],
      echartsInstances: [],
      isFullscreen: false,
      tableHeight: 160,
      // 新增：中心图片base64
      centerImage:
        "",
      // 新增：功能模块列表（图标可替换为实际项目中的图片路径）
      functionModuleList: [
        {
          name: "流域水环境监管<br/>数据库建设",
          icon: require("@/assets/images/jsc/i1.png"), // 替换为实际图标路径
          path: "/database/build",
        },
        {
          name: "流域水环境<br/>综合管理系统",
          icon: require("@/assets/images/jsc/i2.png"),
          path: "/waterEnv/management",
        },
        {
          name: "饮用水源地<br/>综合管理系统",
          icon: require("@/assets/images/jsc/i3.png"),
          path: "/drinkingWater/management",
        },
        {
          name: "流域水环境污染<br/>预警分析系统",
          icon: require("@/assets/images/jsc/i4.png"),
          path: "/pollution/warning",
        },
        {
          name: "智能视频监控<br/>管理系统",
          icon: require("@/assets/images/jsc/i5.png"),
          path: "/video/management",
        },
        {
          name: "流域污染源<br/>综合管理系统",
          icon: require("@/assets/images/jsc/i6.png"),
          path: "/pollutionSource/management",
        },
        {
          name: "流域水环境污染<br/>监测溯源系统",
          icon: require("@/assets/images/jsc/i7.png"),
          path: "/pollution/trace",
        },
        {
          name: "水生态环境<br/>一张图",
          icon: require("@/assets/images/jsc/i8.png"),
          path: "/waterEcology/map",
        },
        {
          name: "系统权限<br/>管理",
          icon: require("@/assets/images/jsc/i9.png"),
          path: "/system/permission",
        },
      ],
    };
  },
  computed: {
    // 顶部标题栏样式：F11全屏140px，非全屏自适应高度（基于屏幕比例）
    headerStyle() {
      return this.isFullscreen ? { height: "140px" } : { height: "10vh" }; // 非全屏时占屏幕高度8%，可调整
    },
    // 主体内容样式：高度 = 屏幕高度 - 标题栏高度
    mainContentStyle() {
      return this.isFullscreen
        ? { height: "calc(100vh - 140px)" }
        : { height: "calc(100vh - 10vh)" };
    },
  },
  mounted() {
    // 初始化全屏状态监听
    this.checkFullscreen();
    window.addEventListener("fullscreenchange", this.checkFullscreen);
    window.addEventListener("webkitfullscreenchange", this.checkFullscreen);
    window.addEventListener("mozfullscreenchange", this.checkFullscreen);
    window.addEventListener("MSFullscreenChange", this.checkFullscreen);

    // 初始化数据和组件
    this.getMenuListData();
    this.checkList = this.layerData.map((layer) => layer.id);
    this.getAutoWaterQualityData();
    this.getManualWaterQualityData();
    this.getManualSegmentDateChangeData();
    this.getAutovaluatehourdata();
    this.getPollutionSourceAnalysisData();
    this.getWarningLastInfoData();
    this.initMap();
    this.initGaugeCharts(); // 初始化环形图

    // 监听窗口resize，调整表格和图表高度（确保无滚动）
    window.addEventListener("resize", this.handleResize);
    // 初始计算一次表格高度
    this.calcTableHeight();
  },
  beforeDestroy() {
    // 移除所有监听
    window.removeEventListener("fullscreenchange", this.checkFullscreen);
    window.removeEventListener("webkitfullscreenchange", this.checkFullscreen);
    window.removeEventListener("mozfullscreenchange", this.checkFullscreen);
    window.removeEventListener("MSFullscreenChange", this.checkFullscreen);
    window.removeEventListener("resize", this.handleResize);

    // 销毁echarts实例
    this.echartsInstances.forEach((instance) => {
      instance.dispose();
    });
  },
  methods: {
    // 新增：根据水质类别匹配标签类型
    getTagType(quality) {
      const typeMap = {
        Ⅰ类: "success",
        Ⅱ类: "success",
        Ⅲ类: "info",
        Ⅳ类: "warning",
        Ⅴ类: "danger",
        劣Ⅴ类: "danger",
        无类别: "default",
      };
      return typeMap[quality] || "default";
    },
    // 检查是否全屏（适配所有浏览器）
    checkFullscreen() {
      this.isFullscreen = !!(
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement
      );
      // 全屏状态变化时重新计算表格高度
      this.calcTableHeight();
    },
    // 计算表格高度（确保列表无滚动）
    calcTableHeight() {
      // 根据屏幕宽度调整表格高度，确保内容完全显示
      const screenWidth = window.innerWidth;
      if (screenWidth >= 1920) {
        this.tableHeight = 180; // 1920px以上宽屏，表格高度180px
      } else if (screenWidth >= 1680) {
        this.tableHeight = 160;
      } else if (screenWidth >= 1440) {
        this.tableHeight = 150;
      } else {
        this.tableHeight = 140; // 小屏幕最小140px，确保无滚动
      }
    },
    // 窗口resize处理：图表重绘 + 表格高度调整
    handleResize() {
      this.calcTableHeight();
      this.echartsInstances.forEach((instance) => {
        instance.resize();
      });
      // 地图自适应
      if (this.map) {
        this.map.updateSize();
      }
    },

    // 根据水质类别获取标签类型
    getQualityTagType(quality) {
      const typeMap = {
        Ⅰ类: "success",
        Ⅱ类: "success",
        Ⅲ类: "info",
        Ⅳ类: "warning",
        Ⅴ类: "danger",
        劣Ⅴ类: "danger",
        无类别: "default",
      };
      return typeMap[quality] || "default";
    },
    // 导航菜单
    getMenuListData() {
      getMenuList().then((res) => {
        this.menuList = res.data;
      });
    },
    navigateToMenu(keyId, type) {
      this.$store.commit("SET_SYSID", keyId);
      this.$store.dispatch("GenerateRoutes").then(() => {
        getRouterNew(keyId).then((res) => {
          let gopath = "";
          if (type) {
            gopath = this.gopathMap[keyId][type];
          } else {
            gopath = this.gopathMap[keyId];
          }
          setTimeout(() => {
            window.open(gopath, "_blank");
          }, 1000);
        });
      });
    },
    // 图表初始化（优化尺寸，确保完全显示）
    // 修改后的图表初始化方法
    initQualityPieChart() {
      if (this.qualityPie) {
        const index = this.echartsInstances.findIndex(
          (inst) => inst === this.qualityPie
        );
        if (index !== -1) this.echartsInstances.splice(index, 1);
        this.qualityPie.dispose();
      }

      if (this.$refs.qualityPie) {
        try {
          this.qualityPie = echarts.init(this.$refs.qualityPie);
          this.echartsInstances.push(this.qualityPie);

          // 原有颜色映射保留
          const colorMap = {
            Ⅰ类: "#1e90ff",
            Ⅱ类: "#32cd32",
            Ⅲ类: "#90ee90",
            Ⅳ类: "#ffa500",
            Ⅴ类: "#ff6347",
            劣Ⅴ类: "#dc143c",
            无类别: "#cccccc",
          };

          // 处理数据：转换为新图表需要的格式（数据项 + 空白项）
          let chartData = [];
          let nameArray = [];
          let color = [];

          // 遍历原有数据，生成新格式数据
          this.qualityPieData.forEach((item) => {
            const itemColor = colorMap[item.type] || "#666666";
            nameArray.push(item.type);
            color.push(itemColor);

            // 数据项
            chartData.push({
              value: item.size,
              name: item.type,
              itemStyle: {
                normal: {
                  borderWidth: 8,
                  // shadowBlur: 20,
                  borderColor: itemColor,
                  // shadowColor: itemColor,
                },
              },
              // 自定义tooltip显示（包含占比）
              tooltip: {
                formatter: () => {
                  const rate = this.qualityPieRate[item.type] || 0;
                  return `${item.type}: ${item.size}个 (${rate}%)`;
                },
              },
            });

            // 空白项（用于分隔）
            chartData.push({
              value: 0,
              name: "",
              itemStyle: {
                normal: {
                  label: { show: false },
                  labelLine: { show: false },
                  color: "rgba(0, 0, 0, 0)",
                  borderColor: "rgba(0, 0, 0, 0)",
                  borderWidth: 0,
                },
              },
            });
          });

          // 图例分两列显示
          const legendData1 = nameArray.slice(
            0,
            Math.ceil(nameArray.length / 2)
          );
          const legendData2 = nameArray.slice(Math.ceil(nameArray.length / 2));

          // 图表配置（基于用户提供的样式，保留原有数据）
          const option = {
            backgroundColor: "transparent", // 保持面板透明背景
            color: color,
            graphic: {
              elements: [
                {
                  type: "image",
                  z: 3,
                  style: {
                    image: this.centerImage,
                    width: 75,
                    height: 75,
                  },
                  left: "16%",
                  top: "26%",
                },
              ],
            },
            tooltip: {
              trigger: "item",
              textStyle: { fontSize: 12, color: "#fff" },
              backgroundColor: "rgba(10, 30, 60, 0.9)",
              borderColor: "rgba(0, 240, 255, 0.5)",
              borderWidth: 1,
              padding: 8,
            },
            legend: [
              {
                icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                orient: "vertical",
                data: legendData1,
                right: "30%",
                top: "center",
                align: "left",
                textStyle: {
                  color: "#fff",
                  fontSize: 13,
                },
                itemGap: 5,
                formatter: (name) => {
                  const dataItem = this.qualityPieData.find(
                    (item) => item.type === name
                  );
                  const rate = this.qualityPieRate[name] || 0;
                  // return `${name}: ${dataItem ? dataItem.size : 0} (${rate}%)`;
                  return `${name}:  (${rate}%)`;
                },
              },
              {
                icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                orient: "vertical",
                data: legendData2,
                right: "0%",
                top: "center",
                align: "left",
                textStyle: {
                  color: "#fff",
                  fontSize: 13,
                },
                itemGap: 5,
                formatter: (name) => {
                  const dataItem = this.qualityPieData.find(
                    (item) => item.type === name
                  );
                  const rate = this.qualityPieRate[name] || 0;
                  // return `${name}: ${dataItem ? dataItem.size : 0} (${rate}%)`;
                  return `${name}: (${rate}%)`;
                },
              },
            ],
            toolbox: {
              show: false,
            },
            series: [
              {
                name: "",
                type: "pie",
                // clockWise: false,
                // radius: ["60%", "65%"],
                radius: [50, 53],
                width: 105,
                height: 105,
                hoverAnimation: false,
                center: ["20%", "55%"],
                left: "20%",
                top: "center",
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                  },
                },
                data: chartData,
              },
            ],
          };

          this.qualityPie.setOption(option);
        } catch (error) {
          console.error("ECharts初始化失败:", error);
        }
      }
    },

    initWaterChangeChart() {
      const waterChange = echarts.init(this.$refs.waterChange);
      this.echartsInstances.push(waterChange);
      waterChange.setOption({
        tooltip: {
          trigger: "axis",
          textStyle: { color: "#333", fontSize: 12 },
        },
        grid: {
          top: "12%",
          left: "4%",
          right: "4%",
          bottom: "12%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.waterChangeDates,
          axisLine: { lineStyle: { color: "rgba(255,255,255,0.3)" } },
          axisLabel: { color: "#fff", fontSize: 12, rotate: 15 }, // 旋转x轴标签，避免重叠
          splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
        },
        yAxis: {
          type: "value",
          max: 100,
          min: 0,
          axisLine: { lineStyle: { color: "rgba(255,255,255,0.3)" } },
          axisLabel: { color: "#fff", fontSize: 12, formatter: "{value} %" },
          splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
        },
        legend: {
          data: ["I类", "II类", "III类", "IV类", "V类", "劣V类"],
          top: "0%",
          textStyle: { color: "#fff", fontSize: 11 },
          itemWidth: 10,
          itemHeight: 10,
        },
        series: [
          {
            name: "I类",
            type: "bar",
            stack: "总量",
            data: this.waterChangeYilei,
            itemStyle: { color: "#1e90ff" },
            barWidth: 15,
          },
          {
            name: "II类",
            type: "bar",
            stack: "总量",
            data: this.waterChangeErlei,
            itemStyle: { color: "#32cd32" },
            barWidth: 15,
          },
          {
            name: "III类",
            type: "bar",
            stack: "总量",
            data: this.waterChangeSanlei,
            itemStyle: { color: "#90ee90" },
            barWidth: 15,
          },
          {
            name: "IV类",
            type: "bar",
            stack: "总量",
            data: this.waterChangeSilei,
            itemStyle: { color: "#ffa500" },
            barWidth: 15,
          },
          {
            name: "V类",
            type: "bar",
            stack: "总量",
            data: this.waterChangeWulei,
            itemStyle: { color: "#ff6347" },
            barWidth: 15,
          },
          {
            name: "劣V类",
            type: "bar",
            stack: "总量",
            data: this.waterChangeLiewulei,
            itemStyle: { color: "#dc143c" },
            barWidth: 15,
          },
        ],
      });
    },
    initPollutionChart() {
      const pollutionBar = echarts.init(this.$refs.pollutionBar);
      this.echartsInstances.push(pollutionBar);
      pollutionBar.setOption({
        tooltip: {
          trigger: "axis",
          textStyle: { color: "#333", fontSize: 12 },
        },
        grid: {
          top: "10%",
          left: "4%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.PollutionDates,
          axisLine: { lineStyle: { color: "rgba(255,255,255,0.3)" } },
          axisLabel: { color: "#fff", fontSize: 12, rotate: 15 },
          splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
        },
        yAxis: [
          {
            type: "value",
            axisLine: { lineStyle: { color: "rgba(255,255,255,0.3)" } },
            axisLabel: { color: "#fff", fontSize: 12 },
            splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
          },
          {
            type: "value",
            axisLine: { lineStyle: { color: "rgba(255,255,255,0.3)" } },
            axisLabel: { color: "#fff", fontSize: 12 },
            splitLine: { show: false },
          },
        ],
        series: [
          {
            name: "超标企业",
            type: "bar",
            yAxisIndex: 0,
            data: this.PollutionBarData,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#4a90e2" },
                  { offset: 1, color: "#0088fe" },
                ],
              },
            },
            barWidth: 18,
          },
          {
            name: "排放量",
            type: "line",
            yAxisIndex: 1,
            data: this.PollutionLineData,
            symbol: "circle",
            symbolSize: 6,
            lineStyle: { color: "#f74663", width: 2 },
            itemStyle: {
              color: "#f74663",
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
        ],
      });
    },
    // 数据请求
    getAutoWaterQualityData() {
      getAutoWaterQuality()
        .then((response) => {
          if (response.code === 200) {
            this.qualityPieData = response.data || [];
            this.qualityPieTotal = this.qualityPieData.reduce(
              (sum, item) => sum + item.size,
              0
            );
            this.qualityPieOfflinesize =
              this.qualityPieData.find((item) => item.type === "无类别")
                ?.size || 0;
            this.qualityPieisOvesize = this.qualityPieData
              .filter((item) => ["Ⅳ类", "Ⅴ类", "劣Ⅴ类"].includes(item.type))
              .reduce((sum, item) => sum + item.size, 0);
            const excellentSize = this.qualityPieData
              .filter((item) => ["Ⅰ类", "Ⅱ类", "Ⅲ类"].includes(item.type))
              .reduce((sum, item) => sum + item.size, 0);
            this.qualityPieexcellent = this.qualityPieTotal
              ? Math.round((excellentSize / this.qualityPieTotal) * 100)
              : 0;

            this.qualityPieData.forEach((item) => {
              this.qualityPieRate[item.type] = Math.round(
                (item.size / this.qualityPieTotal) * 100
              );
            });
            this.initQualityPieChart();
          } else {
            console.error("获取水质数据失败:", response);
            this.qualityPieData = [];
          }
        })
        .catch((error) => {
          console.error("获取水质数据异常:", error);
          this.qualityPieData = [];
        });
    },
    getManualWaterQualityData() {
      let params = { assessTypeCode: this.manualSectionType };
      getManualWaterQuality(params)
        .then((response) => {
          if (response.code === 200) {
            let data = response.data;
            this.gaugeSampleDate = data.sampleDate || "";
            let manualWaterQualityData = data.isoverList || null;
            this.isOver = manualWaterQualityData.isOver;
            this.tbisOver = manualWaterQualityData.tbisOver;
            this.hbisOver = manualWaterQualityData.hbisOver;
            this.yl = manualWaterQualityData.yl;
            this.hbyl = manualWaterQualityData.hbyl;
            this.tbyl = manualWaterQualityData.tbyl;
            // 更新环形图
            this.initGaugeCharts();
          } else {
            console.error("获取手动断面达标数据失败:", response);
          }
        })
        .catch((error) => {
          console.error("获取手动断面达标数据异常:", error);
        });
    },
    manualTypeChange() {
      this.getManualWaterQualityData();
    },
    getAutovaluatehourdata() {
      autovaluatehourdata()
        .then((response) => {
          if (response.code === 200) {
            this.monitorList = response.rows || [];
            // 限制列表最大显示行数（确保无滚动）
            if (this.monitorList.length > 5) {
              this.monitorList = this.monitorList.slice(0, 5); // 最多显示5行，避免滚动
            }
          } else {
            console.error("获取实时监测数据失败:", response);
          }
        })
        .catch((error) => {});
    },
    getManualSegmentDateChangeData() {
      getManualSegmentDateChange()
        .then((response) => {
          if (response.code === 200) {
            let data = response.data;
            this.waterChangeDates = data.timeList || [];
            // 限制x轴数据量，避免标签重叠
            if (this.waterChangeDates.length > 8) {
              this.waterChangeDates = this.waterChangeDates.slice(0, 8);
            }
            let waterChangedata = data.data || [];
            this.waterChangeYilei = [];
            this.waterChangeErlei = [];
            this.waterChangeSanlei = [];
            this.waterChangeSilei = [];
            this.waterChangeWulei = [];
            this.waterChangeLiewulei = [];
            waterChangedata.slice(0, 8).forEach((item) => {
              // 同步限制数据量
              this.waterChangeYilei.push(item.oneCategory);
              this.waterChangeErlei.push(item.twoCategory);
              this.waterChangeSanlei.push(item.threeCategory);
              this.waterChangeSilei.push(item.fourCategory);
              this.waterChangeWulei.push(item.fiveCategory);
              this.waterChangeLiewulei.push(item.sixCategory);
            });
            this.initWaterChangeChart();
          } else {
            console.error("获取手动断面日期变更数据失败:", response);
          }
        })
        .catch((error) => {
          console.error("获取手动断面日期变更数据异常:", error);
        });
    },
    processPollutionSourceAnalysisData() {
      if (this.pollutionSourceAnalysisData) {
        this.sewagefarmNums = this.pollutionSourceAnalysisData.sewagefarmNums;
        this.outfallNums = this.pollutionSourceAnalysisData.outfallNums;
        this.overNums = this.pollutionSourceAnalysisData.overNums;
        this.dischargeNums = this.pollutionSourceAnalysisData.discharge;

        const pollutionList =
          this.pollutionSourceAnalysisData.pollutionList || [];
        // 限制x轴数据量，避免标签重叠
        this.PollutionDates = pollutionList
          .slice(0, 8)
          .map((item) => item.dateTime);
        this.PollutionBarData = pollutionList
          .slice(0, 8)
          .map((item) => item.overNums);
        this.PollutionLineData = pollutionList
          .slice(0, 8)
          .map((item) => item.discharge);
      }
      this.initPollutionChart();
    },
    getPollutionSourceAnalysisData() {
      getPollutionSourceAnalysis()
        .then((response) => {
          if (response.code === 200) {
            this.pollutionSourceAnalysisData = response.data;
            this.processPollutionSourceAnalysisData();
          } else {
            console.error("获取污染源分析数据失败:", response);
          }
        })
        .catch((error) => {
          console.error("获取污染源分析数据异常:", error);
        });
    },
    getWarningLastInfoData() {
      getWarningLastInfo()
        .then((response) => {
          if (response.code === 200) {
            let warnData = response.data || [];
          }
        })
        .catch((error) => {
          console.error("获取最新预警信息异常:", error);
        });
    },
    // 地图相关方法
    addLayerToMap(newLayer, layerConfig) {
      newLayer.set("id", layerConfig.id);
      newLayer.set("name", layerConfig.name);
      newLayer.set("type", layerConfig.geoType);
      if ("minZoom" in layerConfig && layerConfig.minZoom) {
        newLayer.setMinZoom(layerConfig.minZoom);
      }
      if ("maxZoom" in layerConfig && layerConfig.maxZoom) {
        newLayer.setMaxZoom(layerConfig.maxZoom);
      }
      this.map.addLayer(newLayer);
      this.loadedLayers[layerConfig.id] = newLayer;
    },
    createLayer(layer) {
      return new Promise((resolve, reject) => {
        let newLayer;
        switch (layer.dataType) {
          case "dataApi":
            getData(layer.id)
              .then((response) => {
                const data = response.data || [];
                if ("heatmap" in layer && layer.heatmap) {
                  newLayer = createHeatmapLayer({
                    data: data,
                    layerId: layer.id,
                    layerType: layer.geoType,
                  });
                } else {
                  newLayer = createPointLayer({
                    data: data,
                    layerId: layer.id,
                    layerType: layer.geoType,
                  });
                }
                resolve(newLayer);
              })
              .catch((error) => {
                console.error(`获取图层 ${layer.id} 数据失败:`, error);
                reject(error);
              });
            break;
          case "wms":
            try {
              newLayer = createWmsLayer({
                url: layer.layerUrl,
                layerName: layer.wmsLayerName,
                layerId: layer.id,
                params: layer.params || {},
              });
              resolve(newLayer);
            } catch (error) {
              console.error(`创建WMS图层 ${layer.id} 失败:`, error);
              reject(new Error(`创建WMS图层失败: ${error.message}`));
            }
            break;
          case "wmts":
            console.warn("wmts图层功能尚未实现");
            reject(new Error("wmts图层功能尚未实现"));
            break;
          case "base":
            this.switchBaseLayer(layer);
            resolve(null);
            break;
          default:
            console.error("未知图层类型:", layer.type);
            reject(new Error(`未知图层类型: ${layer.type}`));
            break;
        }
      });
    },
    removeLayer(layerId) {
      this.currentLayerIds = this.currentLayerIds.filter(
        (id) => id !== layerId
      );
      if (this.loadedLayers[layerId]) {
        this.map.removeLayer(this.loadedLayers[layerId]);
        delete this.loadedLayers[layerId];
      }
    },
    layerSetVisible(layerId, visible) {
      if (this.loadedLayers[layerId]) {
        this.loadedLayers[layerId].setVisible(visible);
      }
    },
    updateLayer(newLayer, visible) {
      layerData
        .filter((layer) => layer.id === newLayer)
        .forEach((layer) => {
          if (layer.children && layer.children.length > 0) {
            layer.children.forEach((childLayer) => {
              if (this.loadedLayers[childLayer.id]) {
                this.layerSetVisible(childLayer.id, visible);
              } else {
                this.createLayer(childLayer)
                  .then((l) => {
                    if (l) this.addLayerToMap(l, { ...childLayer });
                  })
                  .catch((error) => {
                    console.error(`添加图层 ${childLayer.id} 失败:`, error);
                  });
              }
            });
          } else {
            if (this.loadedLayers[newLayer]) {
              this.layerSetVisible(newLayer, visible);
            } else {
              this.createLayer(layer)
                .then((newLayer) => {
                  if (newLayer) this.addLayerToMap(newLayer, { ...layer });
                })
                .catch((error) => {
                  console.error(`添加图层 ${layer.id} 失败:`, error);
                });
            }
          }
        });
    },
    registerMapClick() {
      this.map.on("singleclick", (evt) => {
        const coordinate = evt.coordinate;
        const features = [];
        this.map.forEachFeatureAtPixel(evt.pixel, (feature) => {
          features.push(feature);
        });

        if (features.length > 0) {
          const feature = features[0];
          const featureData = feature.getProperties();
          const layerId = feature ? feature.get("layerId") : "";
          this.showPopup(featureData, layerId, coordinate);
        } else {
          this.closePopup();
        }
      });
    },
    showPopup(featureData, layerId, position) {
      this.popupFeatureData = featureData;
      this.popupLayerId = layerId;
      this.popupPosition = position;
      this.popupVisible = true;
    },
    closePopup() {
      this.popupFeatureData = {};
      this.popupLayerId = "";
      this.popupVisible = false;
    },
    initMap() {
      let base_layer = createWmsLayer({
        url: wmsBaseUrl,
        layerName: "gp:base_dlg",
        layerId: "base_dlg",
        params: {
          format: "image/png",
          VERSION: "1.1.1",
          STYLES: "",
          LAYERS: "gp:base_dlg",
        },
      });
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            name: "tianditu-vec",
            source: new XYZ({
              url: `http://t{0-7}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${this.tiandituToken}`,
              projection: "EPSG:4326",
              tileGrid: new WMTSTileGrid({
                origin: [-180, 90],
                resolutions: [
                  1.40625, 0.703125, 0.3515625, 0.17578125, 0.087890625,
                  0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625,
                  0.00274658203125, 0.001373291015625, 0.0006866455078125,
                  0.00034332275390625, 0.000171661376953125,
                  0.0000858306884765625,
                ],
                matrixIds: [
                  "1",
                  "2",
                  "3",
                  "4",
                  "5",
                  "6",
                  "7",
                  "8",
                  "9",
                  "10",
                  "11",
                  "12",
                  "13",
                  "14",
                  "15",
                ],
              }),
            }),
          }),
          new TileLayer({
            name: "tianditu-cva",
            source: new XYZ({
              url: `http://t{0-7}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${this.tiandituToken}`,
              projection: "EPSG:4326",
              tileGrid: new WMTSTileGrid({
                origin: [-180, 90],
                resolutions: [
                  1.40625, 0.703125, 0.3515625, 0.17578125, 0.087890625,
                  0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625,
                  0.00274658203125, 0.001373291015625, 0.0006866455078125,
                  0.00034332275390625, 0.000171661376953125,
                  0.0000858306884765625,
                ],
                matrixIds: [
                  "1",
                  "2",
                  "3",
                  "4",
                  "5",
                  "6",
                  "7",
                  "8",
                  "9",
                  "10",
                  "11",
                  "12",
                  "13",
                  "14",
                  "15",
                ],
              }),
            }),
          }),
          base_layer,
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [112.930691, 35.791355],
          zoom: 11,
          maxZoom: 18,
          minZoom: 1,
        }),
      });

      this.checkList.forEach((item) => {
        this.updateLayer(item, true);
      });
      this.registerMapClick();
    },
  },
};
</script>

<style lang="scss" scoped>
// 基础样式变量
$primary-color: #00f0ff;
$secondary-color: #0088fe;
$success-color: #32cd32;
$danger-color: #ff4d4f;
$bg-color: #0a192f;
$panel-bg: rgba(10, 30, 60, 0.9); // 加深面板背景，提升对比度
$border-color: rgba(0, 240, 255, 0.4);
$text-color: #fff;
$text-secondary: rgba(255, 255, 255, 0.8);
$shadow: 0 0 20px rgba(0, 240, 255, 0.3);

.dashboard-container {
  width: 100%;
  height: 100vh;
  // 关键修改：背景图自适应，保持比例且完全显示
  background: url("~@/assets/images/jsc/bg1.png") no-repeat center;
  // background-size: cover; // 或 contain，根据设计需求选择
  background-size: 100% 100%; // 或 contain，根据设计需求选择
  color: $text-color;
  overflow: hidden;
}

// 顶部标题栏（F11全屏140px，非全屏自适应）
.top-header {
  display: flex;
  align-items: center;
  justify-content: center;
  // background: url("~@/assets/images/jsc/top.png") no-repeat center;
  background-size: cover;
  transition: height 0.3s ease; // 平滑过渡

  h1 {
    font-size: 29px;
    font-weight: bold;
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
    margin: 0;
    text-align: center;
    // padding: 0 20px;
    padding: 50px 0 0 0;
  }

  // 响应式字体大小
  @media (max-width: 1680px) {
    h1 {
      font-size: 28px;
    }
  }
  @media (max-width: 1440px) {
    h1 {
      font-size: 26px;
    }
  }
  @media (max-width: 1200px) {
    h1 {
      font-size: 22px;
    }
  }
  @media (max-width: 768px) {
    h1 {
      font-size: 18px;
    }
  }
}

// 主体内容布局（核心：左右面板无滚动，完全显示）
.main-content {
  display: flex;
  width: 100%;
  height: 100%;
  transition: height 0.3s ease; // 平滑过渡
  overflow: hidden; // 禁止整体滚动
}

// 左右面板列：1920*1080下固定500px，高度100%，无滚动
.panel-col {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px;
  width: 500px; // 核心：1920*1080下固定500px
  height: 100%;
  box-sizing: border-box; // 确保padding不影响宽高
  overflow: hidden; // 禁止面板列滚动
}

// 单个面板：均分高度，确保所有内容完全显示
.panel {
  background-color: transparent;
  padding: 12px;
  flex: 1; // 面板均分父容器高度
  min-height: 180px; // 最小高度，避免过矮
  display: flex;
  flex-direction: column;
  justify-content: space-between; // 内容均匀分布
}

// 面板头部
.panel-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  padding-bottom: 6px;
  background-image: url("~@/assets/images/jsc/title.png");
  height: 40px;
  // background-position: -20px 156%;
  background-position: -20px -30%;
  background-repeat: no-repeat;

  .panel-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
  }

  .panel-title {
    // font-size: 16px;
    // margin: 0;
    // color: $primary-color;
    // font-weight: 600;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 18px;
    color: #ffffff;
    font-style: italic;
  }

  .data-icon {
    cursor: pointer;
    font-size: 16px;
    color: $primary-color;
    transition: all 0.3s;

    &:hover {
      color: $secondary-color;
      transform: scale(1.1);
    }
  }

  .stats,
  .date {
    font-size: 12px;
    color: $text-secondary;
    margin: 0;
    line-height: 1.4;
    white-space: nowrap; // 禁止文字换行
    overflow: hidden;
    text-overflow: ellipsis; // 超出部分省略号
  }
}

// 图表容器：自适应面板高度，无滚动
.chart {
  width: 100%;
  flex: 1;
  min-height: 100px;
}

// 单选按钮组：紧凑布局
.radio-group {
  margin: 8px 0;
  flex-shrink: 0;

  .el-radio-group {
    margin-left: 50%;
    transform: translateX(-50%);

    .el-radio-button {
      text-align: center;

      .el-radio-button__inner {
        background: transparent;
        border-color: $border-color;
        color: $text-secondary;
        font-size: 12px;
        padding: 2px 0;
      }

      &.is-active {
        .el-radio-button__inner {
          background: $primary-color;
          border-color: $primary-color;
          color: $bg-color;
        }
      }
    }
  }
}

// ******** 双环形仪表盘样式 ********
.gauge-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 10px; // 左右仪表盘间距
  padding: 10px 0;
}

// 单个环形组（图表+文字）
.gauge-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 49%;
  height: 100%;
}
.gauge-group.cicLeft {
  background: url("~@/assets/images/jsc/l_i2.png");
  background-repeat: no-repeat;
}
.gauge-group.cicRight {
  background: url("~@/assets/images/jsc/l_i3.png");
  background-repeat: no-repeat;
}

// 环形图表容器
.gauge-chart {
  width: 120px;
  height: 120px;
  margin-bottom: 10px;
}

// 文字信息容器
.gauge-info {
  display: flex;
  // flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: end;
  width: 100%;
  margin-top: 13%;
}

// 百分比数值（最大号字体，突出显示）
.gauge-value {
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6); // 发光效果，增强视觉
  color: #fff;
}

// 同比环比容器
.gauge-trend {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 10%;
}

// 同比环比文字样式（区分正负）
.gauge-trend .up {
  color: $success-color;
}
.gauge-trend .down {
  color: $danger-color;
}

// 指标说明（底部文字）
.gauge-label {
  font-size: 14px;
  color: #fff;
  margin-top: 4px;
  font-weight: 500;
  text-shadow: 0 0 4px rgba(0, 240, 255, 0.4);
}

// 分割线
.gauge-divider {
  width: 2px;
  height: 80px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 240, 255, 0.6),
    transparent
  ); // 渐变分割线，更美观
}

// 信息文本：紧凑布局
.info-text {
  font-size: 12px;
  line-height: 1.8;
  color: $text-secondary;
  flex-shrink: 0;

  .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;

    p {
      margin: 0;
      flex: 1;
      text-align: center;
      padding: 0 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    p:first-child {
      text-align: left;
      padding-left: 0;
    }

    p:last-child {
      text-align: right;
      padding-right: 0;
    }
  }
}

// 监测表格：固定高度，无滚动
.monitor-table {
  width: 100%;
  flex: 1;
  min-height: 100px;

  .el-table {
    background: transparent;
    border: 1px solid $border-color;
    font-size: 12px;

    .el-table__header-wrapper {
      .el-table__header {
        th {
          background: rgba(0, 240, 255, 0.1) !important;
          color: $primary-color !important;
          border-bottom: 1px solid $border-color !important;
          font-size: 12px;
          padding: 4px 0;
        }
      }
    }

    .el-table__body-wrapper {
      .el-table__row {
        td {
          background: transparent !important;
          color: $text-secondary !important;
          border-bottom: 1px solid rgba(0, 240, 255, 0.1) !important;
          font-size: 11px;
          padding: 6px 0;
        }
      }
    }
  }

  .el-tag {
    font-size: 10px;
    padding: 1px 4px;
  }
}

// 视频容器：自适应高度
.video-container {
  width: 100%;
  flex: 1;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;

  .black-video-placeholder {
    width: 100%;
    height: 100%;
    background-color: #000;
    border-radius: 4px;
    object-fit: cover;
  }
}

// 中间地图区域
.center-section {
  flex: 1;
  padding: 15px;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background: url("~@/assets/images/jsc/midn.png") no-repeat center;
  // background-size: contain; // 确保中间背景图完全显示
  // background-size: 80% auto; // 确保中间背景图完全显示
  background-size: 66% auto;
  background-position: center 10%;
  position: relative;

  // 中间功能模块区域
  .function-modules {
    position: absolute;
    bottom: 10%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    // background: rgba(10, 30, 60, 0.8);
    // border: 1px solid rgba(0, 240, 255, 0.4);
    border-radius: 8px;
    margin-bottom: 20px;

    .module-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 150px;
      height: 160px;
      cursor: pointer;
      transition: all 0.3s;
      background-image: url("~@/assets/images/jsc/bgk.png");
      background-size: 100% 100%;
      justify-content: center;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
      }

      .module-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 8px;
        margin-top: 5%;
      }

      .module-name {
        // font-size: 14px;
        // color: #fff;
        text-align: center;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 20px;
        color: #e9edf5;
      }
    }
  }
}

.map-container {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid $border-color;
  box-shadow: $shadow;
}

// 实时监测列表-自定义样式
.monitor-list-custom {
  flex: 1;
  overflow-y: auto; // 超出高度时滚动
  padding: 10px 0;

  .monitor-item {
    background: rgba(10, 30, 60, 0.8);
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 10px;
    transition: all 0.3s;

    &:hover {
      border-color: rgba(0, 240, 255, 0.6);
      box-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
    }

    // 超标项特殊样式
    &.exceed {
      border-left: 3px solid #ff4d4f;
    }
  }

  .item-header {
    display: flex;
    align-items: center;
    gap: 8px;

    .el-icon-water-drop {
      color: #00f0ff;
      font-size: 16px;
    }

    .item-name {
      color: #fff;
      font-size: 14px;
      font-weight: 500;
    }

    .el-tag {
      margin-left: auto; // 推到右侧
    }
  }

  .exceed-desc {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0, 240, 255, 0.3);

    .desc-label {
      color: #ff4d4f;
      font-size: 13px;
      margin-right: 6px;
    }

    .desc-content {
      color: #fff;
      font-size: 13px;
    }
  }

  .no-data {
    text-align: center;
    color: #aaa;
    padding: 20px 0;
    font-size: 13px;
  }
}

// 响应式断点调整（确保不同屏幕下均无滚动）
@media (max-width: 1920px) and (min-width: 1680px) {
  .panel-col {
    width: 500px;
  }

  .panel {
    padding: 10px;
  }

  .chart {
    min-height: 90px;
  }

  // 仪表盘响应式
  .gauge-chart {
    width: 100px;
    height: 100px;
  }
  .gauge-value {
    font-size: 24px;
  }
  .gauge-trend {
    font-size: 11px;
  }
  .gauge-label {
    font-size: 13px;
  }
}

@media (max-width: 1680px) and (min-width: 1440px) {
  .panel-col {
    width: 400px;
  }

  .panel-header .stats,
  .panel-header .date {
    font-size: 11px;
  }

  // 仪表盘响应式
  .gauge-chart {
    width: 90px;
    height: 90px;
  }
  .gauge-value {
    font-size: 22px;
    margin-bottom: 6px;
  }
  .gauge-trend {
    font-size: 10px;
  }
  .gauge-label {
    font-size: 12px;
  }
  .gauge-container {
    gap: 25px;
  }
}

@media (max-width: 1440px) and (min-width: 1200px) {
  .panel-col {
    width: 350px;
  }

  .panel {
    min-height: 160px;
  }

  .chart {
    min-height: 80px;
  }

  .monitor-table .el-table {
    font-size: 11px;
  }

  // 仪表盘响应式
  .gauge-chart {
    width: 80px;
    height: 80px;
  }
  .gauge-value {
    font-size: 20px;
    margin-bottom: 5px;
  }
  .gauge-trend {
    font-size: 10px;
  }
  .gauge-label {
    font-size: 11px;
  }
  .gauge-container {
    gap: 20px;
  }
}

// 平板及以下设备：纵向布局，无滚动
@media (max-width: 1200px) {
  .main-content {
    flex-direction: column;
    overflow: auto; // 仅允许纵向滚动，避免内容溢出
  }

  .panel-col {
    width: 100%;
    height: auto;
    flex-direction: row;
    padding: 10px;
    gap: 10px;
  }

  .panel {
    flex: 1;
    min-width: 280px;
    min-height: 200px;
  }

  .center-section {
    order: -1;
    height: 400px !important;
    padding: 10px;
  }

  // 小屏幕下仪表盘纵向布局
  .gauge-container {
    flex-direction: column !important;
    gap: 15px !important;
  }

  .gauge-group {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
  }

  .gauge-chart {
    width: 100px !important;
    height: 100px !important;
  }

  .gauge-divider {
    width: 80px;
    height: 2px;
    background: linear-gradient(
      to right,
      transparent,
      rgba(0, 240, 255, 0.6),
      transparent
    );
  }
}

@media (max-width: 768px) {
  .panel-col {
    flex-direction: column;
  }

  .panel {
    min-width: auto;
    min-height: 180px;
  }

  .center-section {
    height: 300px !important;
  }

  // 小屏幕仪表盘调整
  .gauge-group {
    flex-direction: column;
  }
  .gauge-chart {
    width: 80px !important;
    height: 80px !important;
  }
  .gauge-value {
    font-size: 18px;
  }
}
</style>
